{% extends 'manager/base/base.html' %}
{% load bootstrap_pagination %}
{% block css %}

{% endblock %}

{% block navbar %}
  <div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <ul class="nav navbar-nav list-inline navbar-left">
        <li class="list-inline-item">
          <button class="button-menu-mobile open-left">
            <i class="mdi mdi-menu"></i>
          </button>
        </li>
        <li class="list-inline-item">
          <h4 class="page-title">博客列表</h4>
        </li>
      </ul>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card-box table-responsive">
          <h4 class="m-t-0 header-title"><b></b></h4>
          <p class="text-muted font-14 m-b-10">
            <form class="form-inline" action="">
              <div>
                <input id="title" name="title" class="form-control" style="width:300px;" placeholder="标题、分类、标签" value="{{ form.cleaned_data.title }}">
                <button type='submit' class='btn btn-primary m-b-6'>搜索</button>&nbsp;&nbsp;<b>共 {{ total }} 条数据</b>
              </div>
            </form>
            <br>
            <div>
              <a class='btn btn-success m-b-6' href="{% url 'blog_create' %}">创建</a>
              <a class='btn btn-danger m-b-6' href="javascript:;" onclick="del_modal_show()">删除</a>
              <a class='btn btn-warning m-b-6' href="javascript:;" onclick="clear_cache_modal()">清除全部缓存</a>
            </div>
          </p>
          <table class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th width="2%"><input type="checkbox" name="check_all" /></th>
                <th>标题</th>
                <th>分类</th>
                <th>标签</th>
                <th>状态</th>
                <th>发表时间</th>
                <th>最后更新时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <form id="item_ids_form">
              {% for item in data_list %}
              <tr>
                <td><input type="checkbox" name="item_ids" value="{{ item.id }}"/></td>
                <td><a href="{% url 'blog_edit' item.id %}">{{ item.title }}</a></td>
                <td>{{ item.classification.name }}</td>
                <td>
                {% for tag in item.get_tags %}
                  {{ tag.name }}&nbsp;
                {% endfor %}
                </td>
                <td>{{ item.get_status_display }}</td>
                <td>{{ item.publish_time|date:'Y-m-d H:i' }}</td>
                <td>{{ item.last_update|date:'Y-m-d H:i' }}</td>
                <td>
                  {% if item.status == 1 %}
                    <a href="javascript:;" class="btn btn-success btn-sm" onclick="update_status_modal_show('{{ item.id }}', 2)">发布</a>
                  {% elif item.status == 2 %}
                    <a href="javascript:;" class="btn btn-danger btn-sm" onclick="update_status_modal_show('{{ item.id }}', 1)">撤回</a>
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
              </form>
            </tbody>
          </table>
          <div class="pull-right">
            {% bootstrap_paginate data_list url_extra_args=params range=10 show_first_last="true" %}
          </div>
        </div>
      </div>
      <!-- 删除博客 -->
      <div id="del_blogs_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myLargeModalLabel">删除博客</h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form>
              <div class="modal-body">
                <h4>确认删除博客？</h4>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-inverse" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="delete_blogs()">提交</button>
              </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- 清除缓存 -->
      <div id="clear_cache_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myLargeModalLabel">清除缓存</h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form>
              <div class="modal-body">
                <h4>确认清除全部缓存？</h4>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-inverse" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="clear_caches()">确定</button>
              </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- 发布或撤回文章 -->
      <div id="update_status_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myLargeModalLabel">发布或撤回文章</h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form>
              <div class="modal-body">
                <h4>确认操作？</h4>
                <input type="hidden" id="blog_status">
                <input type="hidden" id="blog_id">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-inverse" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="update_status()">确定</button>
              </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>

    </div>
    <!-- end row -->
  </div> <!-- container -->
{% endblock %}

{% block js %}
  <script>
  // 反选和全选
  select_and_reverse();

  // 发布或撤回文章
  function update_status_modal_show(blog_id, status) {
    $("#blog_id").val(blog_id);
    $("#blog_status").val(status);
    $("#update_status_modal").modal('show');
  }
  // 批量删除博客
  function update_status() {
    $("#update_status_modal").modal('hide');
    var blog_id = $("#blog_id").val();
    var status = $("#blog_status").val();
    $.ajax({
      url: "{% url 'blog_update_status' %}",
      type: 'POST',
      data: {
        "blog_id": blog_id,
        "status": status
      },
      success: function (data) {
        if (data.code == ERROR_CODE.SUCCESS) {
          msg_info("操作成功", 'success')
          setTimeout(function(){window.location.href = "{% url 'blog_list' %}";}, 1000);
        } else if (data.code == ERROR_CODE.PARAM_ERROR) {
          msg_info('参数错误', 'error');
        }
      },
      error: function () {
        msg_info('操作失败!', 'error');
      }
    });
  }
  // 删除模态框
  function del_modal_show() {
    $("#del_blogs_modal").modal('show');
  }
  // 批量删除博客
  function delete_blogs() {
    $("#del_blogs_modal").modal('hide');
    var formData = $("#item_ids_form").serialize();
    $.ajax({
      url: "{% url 'blog_del' %}",
      type: 'POST',
      data: formData,
      success: function (data) {
        if (data.code == ERROR_CODE.SUCCESS) {
          msg_info("删除成功", 'success')
          setTimeout(function(){window.location.href = "{% url 'blog_list' %}";}, 1000);
        } else if (data.code == ERROR_CODE.PARAM_ERROR) {
          msg_info('参数错误', 'error');
        }
      },
      error: function () {
        msg_info('删除失败!', 'error');
      }
    });
  }
  // 清除缓存模态框
  function clear_cache_modal() {
    $("#clear_cache_modal").modal('show');
  }
  // 清除缓存
  function clear_caches() {
    $("#clear_cache_modal").modal('hide');
    $.ajax({
      url: "{% url 'clear_caches' %}",
      type: 'POST',
      data: {},
      success: function (data) {
        if (data.code == ERROR_CODE.SUCCESS) {
          msg_info("清除成功", 'success')
          setTimeout(function(){window.location.href = "{% url 'blog_list' %}";}, 1000);
        } else if (data.code == ERROR_CODE.PARAM_ERROR) {
          msg_info('参数错误', 'error');
        }
      },
      error: function () {
        msg_info('清除失败!', 'error');
      }
    });
  }
</script>
{% endblock %}
